<!DOCTYPE html>
<html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>修改密码--layui后台管理模板 2.0</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="/resource/common/layui/css/layui.css" media="all"/>
    <link href="/resource/css/book02.css" rel="stylesheet" type="text/css">
</head>

<style>
    .layui-edge {
        display: none;
    }
</style>
<body class="index">
<div class="book_con01">
    <h1 class="book_h01">新增商品</h1>
    <div class="layui-form">
        <div class="top">
            <div>
                <div class="top_out">
                    <table class="table" style="width: 100%">
                        <tbody>
                        <tr>
                            <td>商品名称<span>*</span></td>
                            <td colspan="8"><input type="text" class="layui-input" name="name" placeholder="请输入商品名称"
                                                   minlength="2"
                                                   lay-verify="required"></td>
                        </tr>
                        <tr>
                            <td>商品分类<span>*</span></td>
                            <td>
                                <select class="layui-select" name="classifyId" id="classifyId" lay-filter="classifyId">
                                    <option value="0">请选择</option>
                                    <option th:each="classify:${classifyList}"
                                            th:value="${classify.id}" th:text="${classify.name}">
                                    </option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>商品子分类<span>*</span></td>
                            <td>
                                <select class="layui-select" name="chdClassId" id="chdClassId">
                                    <option value="0">请选择</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>商品参数<span>*</span></td>
                            <td colspan="8"><input type="text" class="layui-input" name="parameter"
                                                   placeholder="不同参数间请用逗号隔开(否则后台无法区分每个参数)"
                                                   lay-verify="required"></td>
                        </tr>
                        <tr>
                            <td>商品图<span>*</span></td>
                            <td><input type="text" id="imgSrc" readonly class="layui-input"
                                       lay-verify="required">
                                <input hidden name="img" id="img"></td>
                        </tr>
                        <tr>
                            <td>价格<span>*</span></td>
                            <td><input type="text" id="price" name="price" min="1" class="layui-input"
                                       lay-verify="required|price" style="width: 40%"></td>
                        </tr>
                        <tr>
                            <td>折扣<span>*</span></td>
                            <td><input type="text" id="discount" name="discount" class="layui-input"
                                       lay-verify="required|decimals" placeholder="0-1之间的两位小数" style="width: 40%"
                            ></td>
                        </tr>
                        <tr>
                            <td>编码<span>*</span></td>
                            <td><input type="text" id="code" name="code" class="layui-input"
                                       lay-verify="required|codes" placeholder="英文字母(4位大写)" style="width: 40%"></td>
                        </tr>
                        <tr>
                            <td>商品详情<span>*</span></td>
                            <td colspan="8" style="text-align: left">
                                <textarea id="editor" class=" layui-textarea" name="particulars"
                                          style="height: 200px"></textarea>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class=" but_p">
            <button class="but_save" type="submit" lay-submit="" lay-filter="Submit">发布</button>
        </div>
        <div style="clear: both;padding-bottom: 40px"></div>
    </div>
</div>
<script type="text/javascript" src="/resource/common/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['table', 'layer', 'upload', 'form', 'layedit'], function () {
        var table = layui.table,
            $ = layui.$,
            layer = layui.layer,
            layedit = layui.layedit,
            upload = layui.upload,
            form = layui.form;
        form.verify({
            codes: function (value) {
                if (value.length != 4) {
                    return '编码为4位数';
                }
                if (!new RegExp("^[A-Z]").test(value)) {
                    return '编码必须是大写字母';
                }
            }
            , decimals: function (value) {
                if (!new RegExp("^0\\.[1-9]{0,2}$").test(value)) {
                    return '请输入正确的折扣(0-1之间的两位小数)';
                }
            }
            , price: function (value) {
                if (!new RegExp("(^[1-9]\\d*(\\.\\d{1,2})?$)|(^0(\\.\\d{1,2})?$)").test(value)) {
                    return '请输入正确的产品价格:整数或者保留两位小数';
                }
            }
        });
        //普通图片上传
        upload.render({
            elem: '#imgSrc'
            , url: '/upload.do'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                $("#img").val(res.obje);
                $("#imgSrc").val(res.obje);
                return layer.msg('上传成功');
            }
            , error: function () {
                return layer.msg('上传失败');
            }
        });
        //监听父分类选择框
        form.on('select(classifyId)', function (data) {
            $.ajax({
                url: '/classify/getChdClassifys.do',
                type: 'post',
                data: {'ptId': data.value},
                dataType: 'json',
                success: function (data) {
                    var htmlStr = "<option value='0'>请选择</option>";
                    for (var i = 0; i < data.length; i++) {
                        htmlStr += "<option value='" + data[i].id + "'>" + data[i].name + "</option>"
                    }
                    $("select[name='chdClassId']").html(htmlStr);
                    form.render()
                }
            })
        })
        form.on('submit(Submit)', function (data) {
            data.field.particulars = layedit.getContent(index)
            var classifyId = data.field.classifyId;
            var chdClassId = data.field.chdClassId;
            console.log(classifyId + chdClassId)
            if (classifyId == '0') {
                layer.msg('请选择商品分类!', {icon: 5});
                return false;
            }
            if (chdClassId == '0') {
                layer.msg('请选择子商品分类!', {icon: 5});
                return false;
            }
            $.ajax({
                url: '/product/product.do',
                type: 'post',
                data: data.field,
                dataType: 'json',
                async: false,
                success: function (result) {
                    if (!result.status) {
                        parent.layer.msg(result.msg, {time: 2000});
                        return false;
                    } else {
                        layer.msg("新增成功!", {
                            time: 900,
                            end: function () {
                                location.reload()
                            }
                        })
                    }
                }

            });
        });
        layedit.set({
            //暴露layupload参数设置接口 --详细查看layupload参数说明
            uploadImage: {
                url: '/layeditUpload.do',
                accept: 'image',
                acceptMime: 'image/*',
                exts: 'jpg|png|gif|bmp|jpeg',
                size: '10240'
            }
            , uploadVideo: {
                url: '/layeditUpload.do',
                accept: 'video',
                acceptMime: 'video/*',
                exts: 'mp4|flv|avi|rm|rmvb',
                size: '20480'
            }
            //右键删除图片/视频时的回调参数，post到后台删除服务器文件等操作，
            //传递参数：
            //图片： imgpath --图片路径
            //视频： filepath --视频路径 imgpath --封面路径
            , calldel: {
                url: '/Attachment/DeleteFile'
            }
            //开发者模式 --默认为false
            , devmode: true
            //插入代码设置
            , codeConfig: {
                hide: true,  //是否显示编码语言选择框
                default: 'javascript' //hide为true时的默认语言格式
            }
            , tool: [
                'code', 'strong', 'italic', 'underline', 'del', 'addhr', 'fontFomatt', 'face'
                , 'left', 'center', 'right', 'link', 'unlink', 'images', 'image_alt', 'video', 'anchors'
                , 'table', 'fullScreen']

        });
        var index = layedit.build('editor', {
            height: 400 //设置编辑器高度
        });
    });

</script>

</body>
</html>